<template>
  <div class="feed">
    <waterfall :cols="2" :data-list="list" @loadmore="loadmore">
      <div v-for="(item, index) in list" :key="index" class="feed__list-item">
        <feed-item :item="item" />
      </div>
    </waterfall>
    <loaded v-if="loaded" class="feed__loading" />
    <div v-else class="feed__loading">
      <span>已加载全部商品</span>
    </div>
  </div>
</template>

<script>
import { getHomeRecommend } from '@/utils/api'
import waterfall from './Waterfall1.vue'
import feedItem from './FeedItem1.vue'
// import Cataract from './Cataract.vue'
import Loaded from './Loaded.vue'

export default {
  name: 'Feed',
  components: {
    waterfall,
    feedItem,
    Loaded
  },
  data() {
    return {
      list: [],
      pageIndex: 1,
      pageSize: 10,
      loaded: true
    }
  },
  created() {
    this.getList()
  },
  methods: {
    loadmore() {
      this.pageIndex += 1
      this.getList()
    },
    getList() {
      getHomeRecommend({ pageIndex: this.pageIndex, pageSize: this.pageSize })
        .then((res) => {
          this.list.push(...res.result)
          console.log(this.list)
        })
        .catch((err) => {
          console.log('接口获取失败，失败信息：', err.message)
          this.loaded = false
        })
    }
  }
}
</script>

<style lang="less">
.feed {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 12px 18px;
  margin: 23px -18px 0 -18px;
  background-color: #f0f0f0;
  border-radius: 18px;
  &__loading {
    margin: 12px;
    width: 100%;
    text-align: center;
    font-size: 24px;
    color: #9a9a9a;
    font-weight: 400;
  }
}
</style>
